<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="../../css/reset.css">
    <link rel="stylesheet" href="../../css/common.css">
<!--    <link rel="stylesheet" href="../../css/swiper.min.css">-->
    <link rel="stylesheet" href="../../css/style.css">
    <style>
        #renderCanvas {
            width: 778px;
            height: 380px;
            position: absolute;
            left: 50%;
            margin-left: -373px;
            top: 96px;
            outline: none;
        }

        .loop_box {
            width: 980px;
            height: 405px;
            position: relative;
            background-image: url("08_loop_bg.png");
            background-size: 100%;
            margin-top: 100px;
        }

        .loop_btn {
            width: 225px;
            height: 51px;
            position: absolute;
            left: 50%;
            margin-left: -113px;
            background-image: url("08_btn.png");
            background-size: 100%;
            text-align: center;
            line-height: 51px;
            color: #f7f237;
            font-size: 19px;
            z-index: 10;
        }

        .top_icon {
            position: absolute;
        }

        .top_icon:nth-of-type(1) {
            animation: example1 20s linear infinite alternate;
        }

        .top_icon:nth-of-type(2) {
            animation: example2 16s linear infinite alternate;
        }

        .top_icon:nth-of-type(3) {
            animation: example3 18s linear infinite alternate;
        }

        .top_icon:nth-of-type(4) {
            animation: example4 22s linear infinite alternate;
        }

        .top_icon:nth-of-type(5) {
            animation: example5 18s linear infinite alternate;
        }

        .top_icon:nth-of-type(6) {
            animation: example6 14s linear infinite alternate;
        }

        @keyframes example1 {
            0% {
                transform: translate(0, -10px);
            }
            20% {
                transform: translate(0, 0);
            }
            40% {
                transform: translate(0, 10px);
            }
            60% {
                transform: translate(0, 0px);
            }
            80% {
                transform: translate(0, -10px);
            }
            to {
                transform: translate(0, 10px);
            }
        }

        @keyframes example2 {
            0% {
                transform: translate(0, 10px);
            }
            20% {
                transform: translate(0, 5px);
            }
            40% {
                transform: translate(0, -5px);
            }
            60% {
                transform: translate(0, -10px);
            }
            80% {
                transform: translate(0, -5px);
            }
            to {
                transform: translate(0, 5px);
            }
        }

        @keyframes example3 {
            0% {
                transform: translate(0, -10px);
            }
            20% {
                transform: translate(0, -5px);
            }
            40% {
                transform: translate(0, 5px);
            }
            60% {
                transform: translate(0, 10px);
            }
            80% {
                transform: translate(0, -0px);
            }
            to {
                transform: translate(0, -10px);
            }
        }

        @keyframes example4 {
            0% {
                transform: translate(0, 10px);
            }
            20% {
                transform: translate(0, 5px);
            }
            40% {
                transform: translate(0, -5px);
            }
            60% {
                transform: translate(0, 0px);
            }
            80% {
                transform: translate(0, -5px);
            }
            to {
                transform: translate(0, -10px);
            }
        }

        @keyframes example5 {
            0% {
                transform: translate(0 10px);
            }
            20% {
                transform: translate(0 5px);
            }
            40% {
                transform: translate(0, -5px);
            }
            60% {
                transform: translate(0, -10px);
            }
            80% {
                transform: translate(0, 0px);
            }
            to {
                transform: translate(0, 5px);
            }
        }

        @keyframes example6 {
            0% {
                transform: translate(0, -10px);
            }
            20% {
                transform: translate(0, -5px);
            }
            40% {
                transform: translate(0, 0px);
            }
            60% {
                transform: translate(0, 5px);
            }
            80% {
                transform: translate(0, 10px);
            }
            to {
                transform: translate(0, 5px);
            }
        }

        .center_tips {
            width: 656px;
            height: 67px;
            left: 50%;
            margin-left: -328px;
            top: 131px;
            position: absolute;
            z-index: 10;
            animation: opacity 2s linear infinite alternate;
        }

        @keyframes opacity {
            /*from {*/
            /*    opacity: 1;*/
            /*}*/
            /*to {*/
            /*    opacity: 0.5;*/

            /*}*/
        }
    </style>
</head>
<body style="overflow: hidden;">
<div class="loop_box">
    <img src="08_icon1.png" class="top_icon" style="left: 224px;top: -27px;"/>
    <img src="08_icon2.png" class="top_icon" style="left: 597px;top: -62px;"/>
    <img src="08_icon3.png" class="top_icon" style="left: 490px;top: -85px;"/>
    <img src="08_icon4.png" class="top_icon" style="left: 392px;top: -85px;"/>
    <img src="08_icon5.png" class="top_icon" style="left: 307px;top: -62px;"/>
    <img src="08_icon6.png" class="top_icon" style="left: 684px;top: -27px;"/>

    <img src="08_tips.png" class="center_tips" alt="">

    <div class="loop_btn" style="top: 66px;">企业资源计划管理ERP</div>
    <div class="loop_btn" style="top: 204px;">网络架构及安全SDN</div>
    <div class="loop_btn" style="top: 316px;">数据采集分析SCADA</div>

    <canvas id="renderCanvas" touch-action="none"></canvas>
</div>
</body>
<script type="text/javascript" charset="utf-8" src="../../js/jquery-3.1.1.min.js"></script>
<!--<script type="text/javascript" charset="utf-8" src="../../js/swiper.min.js"></script>-->
<!--<script type="text/javascript" charset="utf-8" src="../../js/common.js"></script>-->
<script src="../../js/babylon/babylon.js"></script>
<script src="../../js/babylon/babylonjs.loaders.min.js"></script>
<script>
	$(function () {

		createLoop();


		function createLoop() {

			let canvas = document.getElementById('renderCanvas');
			let engine = new BABYLON.Engine(canvas, true)

			engine.setHardwareScalingLevel(0.5);


			function customLoadingScreen() {
			}

			customLoadingScreen.prototype.displayLoadingUI = function () {
			};
			customLoadingScreen.prototype.hideLoadingUI = function () {
			};
			let loadingScreen = new customLoadingScreen();
			engine.loadingScreen = loadingScreen;

			engine.displayLoadingUI();


			let createScene = function () {

				let scene = new BABYLON.Scene(engine);
				scene.clearColor = new BABYLON.Color4(0, 0, 0, 0);
				let camera = new BABYLON.ArcRotateCamera("Camera", 0, 0, 0, new BABYLON.Vector3(4, 0.5, 4), scene);
				camera.setTarget(new BABYLON.Vector3.Zero());
				// camera.attachControl(canvas, true);


				// let light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);
				BABYLON.SceneLoader.Append('', "loop.glb", scene, function () {
					engine.hideLoadingUI();
				});


				return scene;
			};

			let scene = createScene();

			engine.runRenderLoop(function () {
				scene.render();
			});
		}

	})
</script>
</html>
